<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .tou{
        width: 100vw;
        margin-top: 4vw;
         border-bottom:#adadad 1px solid;
         height: 12vw;
         
    }
    h1{
       
        text-align: center;
        font-size: 5vw;
        font-family: PingFang-SC-Medium;
        color: #09b674;
       
    }
   .content{
    height: 119vw;
   
    display: flex;
   }
   .item{
    
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;


    height: 100vw;
    width: 12vw;
    border-right:#dddddd 1px solid;
    height: 100%;
}
   
   .item span{
    margin-top: 20vw;
        display: block;
        text-align: center;
        font-size: 3vw;
        font-family: PingFang-SC-Medium;
        color:black;
        margin-top: 2vw;
    }
   .datu{
        
        height: 25vw;
        margin-top: 10px;
        margin-left: 10px;
        border: 1px solid #adadad;
        border-radius: 1vw;
        
    }
    .datu img{
        width: 82vw;
        height: 25vw;
       
        object-fit: cover;
    }
    p{
        margin-top: 3vw;
        font-size: 3vw;
        text-align: center;
    }
.zong{
    display: flex;
   justify-content: space-around;


    flex-wrap: wrap;
    
    margin-top: 4vw;
}
.pinglei img{
    width: 15vw;
    height: 12vw;
}
.fotter{
    margin-top: 33vw;
    width: 100%;
  
    /* background: red; */
    display: flex;
    justify-content: space-around;
    position: fixed;
}
.fotter-box{
    width: 20%;
    height: 100%;
    float: left;
    /* background: #ddd; */
    position: relative;


}
.fotter-box span{
    width: 100%;
    height: 50%;
    position: absolute;
    top: 50%;
    text-align: center;
    font-size: 13px;
}

</style>
<body>
  <div class="tou">
    <h1>分类</h1>
  </div>  

  <div class="content"> 
<div class="item">
<span>洗发水</span>
    <span>洗面奶</span>
   <span>牙膏</span>
   <span> 沐浴露</span>
    <span>洗手液</span>
   <span> 洗衣粉</span>
    <span>洗衣液</span>
    <span>洗碗精</span>
    <span>纸巾</span>
    <span>香皂</span>
</div>

<div  class="neirong">
<div class="datu">
<img src="1678436619543.jpg" alt="">

</div>

<p>推荐专区分类</p>
<div class="zong">

<div class="pinglei">
    <img src="1678436619543.jpg" alt="">
    <p>洗发水</p>
</div>
<div class="pinglei">
    <img src="1678436619543.jpg" alt="">
    <p>洗发水</p>
</div>
<div class="pinglei">
    <img src="1678436619543.jpg" alt="">
    <p>洗发水</p>
</div>

</div>

<div class="zong">

    <div class="pinglei">
        <img src="1678436619543.jpg" alt="">
        <p>洗发水</p>
    </div>
    <div class="pinglei">
        <img src="1678436619543.jpg" alt="">
        <p>洗发水</p>
    </div>
    <div class="pinglei">
        <img src="1678436619543.jpg" alt="">
        <p>洗发水</p>
    </div>
    
    </div>

    <div class="zong">

        <div class="pinglei">
            <img src="1678436619543.jpg" alt="">
            <p>洗发水</p>
        </div>
        <div class="pinglei">
            <img src="1678436619543.jpg" alt="">
            <p>洗发水</p>
        </div>
        <div class="pinglei">
            <img src="1678436619543.jpg" alt="">
            <p>洗发水</p>
        </div>
        
        </div>

        <div class="zong">

            <div class="pinglei">
                <img src="1678436619543.jpg" alt="">
                <p>洗发水</p>
            </div>
            <div class="pinglei">
                <img src="1678436619543.jpg" alt="">
                <p>洗发水</p>
            </div>
            <div class="pinglei">
                <img src="1678436619543.jpg" alt="">
                <p>洗发水</p>
            </div>
            
            </div>
</div>
  </div>
  <div class="fotter">
    <div class="fotter-box">
        <span>首页</span>
    </div>
    <div class="fotter-box">
        <span>分类</span>
    </div>

    <div class="fotter-box">
        <span>购物车</span>

    </div>
    <div class="fotter-box">
        <span>我的</span>

    </div>
</div>
</body>
</html>